<script setup lang="ts">
import { useCrudModal } from '@/hooks/common/crud';
import OpPath = Api.Common.OpPath;

interface Props {
  title: string,
  opPath: OpPath,
  width?: string,
  otherInitMethod?: any;
  submitTransferData?: any;
}
interface Emits {
  (e: 'clickConfirm'): void
  (e: 'clickCancel'): void
  (e: 'refreshList'): void
}
const props = withDefaults(defineProps<Props>(), {
  width: '600px'
});
const emit = defineEmits<Emits>();

const refreshList = () => {
  emit('refreshList')
}

const {
  isShowDialog,
  openDialog,
  closeDialog,
  clickConfirm,
  title,
  loading
} = useCrudModal({
  title: props.title,
  createPath: props.opPath.createPath,
  updatePath: props.opPath.updatePath,
  viewPath: props.opPath.viewPath,
  otherInitMethod: props.otherInitMethod,
  submitTransferData: props.submitTransferData,
  refreshList
});
defineExpose({
  openDialog
});
</script>

<template>
 <n-modal v-model:show="isShowDialog" preset="dialog" :title="title"
          :style="{
            width
          }"
          :show-icon="false" :close-on-esc="false" :mask-closable="false">
   <div class="content-wrapper">
     <slot></slot>
   </div>
   <template #action>
     <n-space justify="end">
       <n-button @click="closeDialog">取消</n-button>
       <n-button type="primary" @click="clickConfirm" :loading="loading">确定</n-button>
     </n-space>
   </template>
 </n-modal>
</template>

<style scoped>

</style>
